<!--
 * @Description: Description
 * @Author: zhaojiansen
 * @Date: 2022-10-11 16:45:31
 * @LastEditors: zhaojiansen
 * @LastEditTime: 2022-11-02 17:39:20
-->
<template>
  <div class="rolemanagementpage">
    <div class="rolemanagementpage_top">
      员工管理
    </div>
    <div class="rolemanagementpage_input">
      <el-row :gutter="24">
        <el-col :span="3">
          <div class="grid-content bg-purple">
            <div class="input">
              <el-input
                v-model="input2"
                placeholder="请输入内容"
                suffix-icon="el-icon-search"
              >
              </el-input>
            </div>

          </div>
        </el-col>
        <el-col :offset="19" :span="1">
          <div class="grid-content bg-purple">

            <div class="button">
              <el-button style="background-color: #0f40f5" type="primary" @click="dialogFormVisible = true">新增角色
              </el-button>
            </div>
          </div>
        </el-col>
        <div style="height:50px"></div>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-table
              :cell-style="rowStyle"
              :data="tableData"
              border
              style="width: 100%"
            >
              <!-- :header-cell-style="tableHeaderColor" -->

              <el-table-column
                align="center"
                label="序号"
                prop="address"
                width="350"
              >
              </el-table-column>

              <el-table-column
                align="center"
                label="姓名"
                prop="name"
                width="350"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="备注"
                prop="province"
                width="350"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="创建人"
                prop="city"
                width="350"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="创建时间"
                prop="date"
                width="350"
              >
              </el-table-column>
              <el-table-column
                align="center"
                fixed="right"
                label="操作"
                width="135"
              >
                <template slot-scope="scope">
                  <el-button size="small" type="text">配置</el-button>
                  <el-button size="small" type="text" @click="handleClick(scope.row)">编辑</el-button>
                  <el-button size="small" type="text" @click="deleteClick(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>


          </div>
        </el-col>


      </el-row>


    </div>
    <div class="searchcharmPagination">
      <!-- <div class="sum">
              共1200条   </div> -->
      <!-- <div class="MaxPerPage">
                  1/5
              </div> -->
      <el-pagination
        :page-size="100"
        :page-sizes="[100, 200, 300, 400]"
        :total="1000"
        background
        layout="total,sizes,prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" title="添加员工">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item :label-width="formLabelWidth" label="角色名称：" prop="name">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="备注：" prop="name">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    //  删除框
    deleteClick(row) {
      this.$confirm('确定永久删除该信息', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // 表格
    //      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
    //   if (rowIndex === 0) {
    //     return "background:#000;font-size:15px;font-weight: 900;";
    //   }
    // },
    rowStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === '姓名') {
        return 'color:blue'
      }
      if (row.column.label === '创建人') {
        return 'color:blue'
      }
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.loadingtable = true
      console.log(val)
    },
    // 编辑
    handleClick(row) {
      this.dialogFormVisible = true
      console.log(row)
    }
  },

  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: ''
        // region: '',
        // date1: '',
        // date2: '',
        // delivery: false,
        // type: [],
        // resource: '',
        // desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
        // region: [
        //   { required: true, message: '请选择活动区域', trigger: 'change' }
        // ],
        // date1: [
        //   { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        // ],
        // date2: [
        //   { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        // ],
        // type: [
        //   { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        // ],
        // resource: [
        //   { required: true, message: '请选择活动资源', trigger: 'change' }
        // ],
        // desc: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ]
      },
      formLabelWidth: '120px',
      input2: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.rolemanagementpage {
  padding: 20px;

  .rolemanagementpage_top {
    color: rgba(16, 16, 16, 1);
    font-size: 20px;
    margin-bottom: 10px;
  }

  .searchcharmPagination {
    text-align: right;
    margin-top: 50px;
  }
}

.sadasda {
  height: 50px;

}

.demo-input-suffix {
  display: flex;
}
</style>
